<template>
    <div class="row" id="rowDiv" ref="rowDiv" style="width: 100%;" @mousewheel="onMousewheel" >
        <button type="button" class="sideBtn" v-show="scrollBtnVisible" ref="leftBtn" style="width: 30px;" @click="scrollLeft">
            <svg width="10px" height="10px">    
                <polygon points="2,5 8,10 8,0" translate="0 10" :class="leftBtnEnabled?'button-enable':'button-disable'" stroke="black" stroke-width="0"/>
            </svg>
        </button>
        <div ref="toolbar" :class="scrollBtnVisible?'toolbar toolbarWidth1':'toolbar toolbarWidth2'">
            <template v-for="(child, index) in $slots.default">
                <span v-if="child.data.attrs && child.data.attrs.type == 'Separator'" class="separator" :key="index">|</span>
                <template v-else>
                    <span v-if="child.data.attrs.prefixIcon" :key = "'icon'+index" :class="child.data.attrs.prefixIcon" class="toolBtnIcon"></span>
                    <button type="button" class="toolBtn" @click="child.data.attrs.click" :key="'btn'+index" v-show="child.data.attrs.visible ? child.data.attrs.visible : true" :disabled = "child.data.attrs.disabled">
                        {{ child.data.attrs.text }}
                    </button>
                </template>
            </template>
        </div>
        <button type="button" class="sideBtn" style="float: right;width: 30px;" v-show="scrollBtnVisible" ref="rightBtn" @click="scrollRight">
            <svg width="10px" height="10px">    
                <polygon points="2,0 2,10 8,5" translate="0 10" :class="rightBtnEnabled?'button-enable':'button-disable'" stroke="black" stroke-width="0"/>
            </svg>
        </button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            scrollBtnVisible:false,
            rightBtnEnabled:true,
            leftBtnEnabled:true
        }
    },
    props:{
        enableMouseWheel:{
            type:Boolean,
            default:true
        }
    },
    created() {
    },
    mounted(){
        this.refreshSize();
    },
    computed:{
    },
    methods:{
        onMousewheel(e){
            //鼠标滚轮滚动菜单
            if(this.enableMouseWheel && this.scrollBtnVisible)
            {
                this.$refs.toolbar.scrollBy({
                    left: e.deltaY * 2,
                    behavior: 'smooth'
                });
                e.preventDefault();
                this.refreshButtonStatus();
            }
        },
        scrollRight(){
            this.$refs.toolbar.scrollBy({
                left: 100,
                behavior: 'smooth'
            })
            this.refreshButtonStatus();
        },
        scrollLeft(){
            this.$refs.toolbar.scrollBy({
                left: -100,
                behavior:'smooth'
            });
            this.refreshButtonStatus();
        },
        refreshButtonStatus(){
            if(this.$refs.toolbar.scrollLeft + this.$refs.toolbar.clientWidth + 1 >= this.$refs.toolbar.scrollWidth)
            {
                this.rightBtnEnabled = false;
            }else{
                this.rightBtnEnabled = true;
            }
            if(this.$refs.toolbar.scrollLeft-1 <=0)
            {
                this.leftBtnEnabled = false;            
            }else{
                this.leftBtnEnabled = true;
            }
        },
        refreshSize(){
            let self = this;
            // 监听元素大小变化，并重新计算是否需要展示按钮。
            const resizeObserver = new ResizeObserver((entries, observer) => {  
                // 只观察一个元素，可以直接取第一个 entry，这里不需要处理元素
                //const entry = entries[0];  
                if(self.$refs.toolbar)
                {
                    self.scrollBtnVisible = self.$refs.toolbar.scrollWidth > self.$refs.toolbar.clientWidth;
                    self.refreshButtonStatus();
                }
            });  
            
            // 选择要观察的元素  
            const resizableBoxElement = self.$refs.rowDiv;
            if(resizableBoxElement)
            {
                resizeObserver.observe(resizableBoxElement);
            }
       }
    }
}
</script>
<style>
:root {
    --primary-color: var(--theme-primary-color, #4c535a) ;
}
</style>
<style scoped>

button{
    border: none;
    background: none;
    cursor: pointer;
}
button:not(:disabled){
    color: var(--theme-text-color);
}
.button-enable{
    fill: var(--primary-color);
}
.button-disable{
    fill: #c0c4cc;
}
.toolbar {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    display: inline-block;
    height: 100%;
    vertical-align:top; 
    padding: 0 10px 0 10px;
}
.toolbarWidth1{
    width: calc(100% - 85px);
}
.toolbarWidth2{
    width: calc(100% - 20px);
}

.toolBtn{
    vertical-align: middle;
    height: 100%;
    line-height: 100%;
}
.toolBtnIcon{
    vertical-align: middle;
    height: 100%;
    line-height: 100%;
    margin-right: 5px;
}
.separator{
    vertical-align: middle;
    height: 100%;
    margin:0px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    color: #a0a4a8;
}
.row {
    background: #f8f9fa;
    height: 30px;
    border: #a0a4a8 0.5px solid;
    border-radius: var(--theme-border-radius);
}
.sideBtn{
    vertical-align:top;
    height: 100%;
}
.sideBtn:first-child{
    border-right: #a0a4a8 0.5px solid;    
    border-radius: 0px;
}
.sideBtn:last-child{
    border-left: #a0a4a8 0.5px solid;    
    border-radius: 0px;
}

</style>